<template>
  <div class="application-container">
    <div v-if="loading" class="loading">
      加载中...
    </div>
    
    <div v-else-if="job" class="application-form">
      <div class="job-summary">
        <h2>申请职位: {{ job.title }}</h2>
        <p><strong>公司:</strong> {{ job.company }}</p>
        <p><strong>地点:</strong> {{ job.location }}</p>
        <p><strong>薪资:</strong> {{ job.salary || '面议' }}</p>
      </div>
      
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="resume">简历信息:</label>
          <textarea 
            id="resume" 
            v-model="applicationForm.resume" 
            required 
            placeholder="请输入您的简历信息，包括教育背景、工作经历等"
            rows="8"
          ></textarea>
        </div>
        
        <div v-if="error" class="error-message">
          {{ error }}
        </div>
        
        <div class="form-actions">
          <button type="submit" class="submit-btn">提交申请</button>
          <button type="button" @click="handleCancel" class="cancel-btn">取消</button>
        </div>
      </form>
    </div>
    
    <div v-else class="not-found">
      <p>职位不存在</p>
      <router-link to="/jobs" class="back-link">返回职位列表</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getJobById } from '../services/jobService';
import { submitApplication } from '../services/applicationService';
import { getCurrentUser } from '../services/authService';

const route = useRoute();
const router = useRouter();

// 数据
const job = ref(null);
const loading = ref(true);
const error = ref('');

// 表单数据
const applicationForm = ref({
  resume: ''
});

// 加载职位数据
const loadJob = () => {
  try {
    const jobId = route.params.id;
    job.value = getJobById(jobId);
  } catch (err) {
    console.error('加载职位失败:', err);
  } finally {
    loading.value = false;
  }
};

// 提交申请
const handleSubmit = () => {
  try {
    const currentUser = getCurrentUser();
    submitApplication(
      route.params.id,
      currentUser.id,
      applicationForm.value.resume
    );
    
    // 申请成功后跳转到职位详情页面
    alert('申请提交成功！');
    router.push(`/jobs/${route.params.id}`);
  } catch (err) {
    error.value = err.message;
  }
};

// 取消申请
const handleCancel = () => {
  router.push(`/jobs/${route.params.id}`);
};

// 组件挂载时加载数据
onMounted(() => {
  loadJob();
});
</script>

<style scoped>
.application-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #7f8c8d;
}

.application-form {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.job-summary {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.job-summary h2 {
  margin-top: 0;
  color: #2c3e50;
}

.job-summary p {
  margin: 0.5rem 0;
  color: #34495e;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #34495e;
}

.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
  resize: vertical;
  min-height: 150px;
}

.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.submit-btn {
  padding: 0.75rem 2rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.cancel-btn {
  padding: 0.75rem 2rem;
  background-color: #95a5a6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn:hover {
  background-color: #7f8c8d;
}

.error-message {
  color: #e74c3c;
  background-color: #fdf2f2;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-align: center;
}

.not-found {
  text-align: center;
  padding: 2rem;
}

.not-found p {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-bottom: 1rem;
}

.back-link {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
}

.back-link:hover {
  text-decoration: underline;
}
</style>